Building and Testing Prototypes Journal
1.1 Paper Prototype
Introduction
The assignment for the first prototype was to build a paper prototype for a fitness tracker. This was the first time for me doing a prototype on paper, as I have never done something like this before. Choosing the design, round or rectangular was the first choice, that I had to make. In the end, I went with a classical round design, since it is what I am used to the most.
Documentation
This is my first iteration of the fitness tracker prototype. The first screen shows the time and the date. The time can also be read through the red dot moving along in the circle line around the time and date. Swiping up from there brings you to the menu, where you can choose between „Run“ and „Results“. If you click on „Run“, you will get to the next two screens, where you can start and stop the run, by clicking the button on the upper right side. There you can see your distance and the time for the duration of your run. From that screen you can swipe up, to see pace, burned kcal, heart rate and amount of steps. You can always go back to the first screen with tapping the button on the lower right side. The last four screens are for „Results“. You can choose between „Day, „Month and „Year“. On each of those screens you can see each statistics, depending on what you choose, for the amount of steps, average heart rate, burned kcal, time spent and the total distance
I had five tester for my prototype and asked each of them to do two tasks, which were, to start a run and look at the statistics for the day. They all thought, that my chosen colors were good and that the icons were clear and understandable and, that the prototype was easy to understand and to interact with. All of them found it hard to read the informations in the „Results“ screens, which I then changed in the second iteration of my prototype.
For the second iteration of my prototype, I took the feedback from testing into consideration and changed some things on the prototype. Changing the two options for „Run“ and „Results“ from text to icons, made it easier to interact with. I also removed some information from the second screen under „Run“, so that it is not too much information and also for the information displayed to be more visible. I changed the screen for choosing between „Day“, „Week“ and „Month“, to make it more visually pleasing and also for choosing, which day, week, or month, you want to see the „Results“, to make it more user friendly and also indicate the intended use by showing an arrow to swipe in the right direction. The feedback I got for this specific screen was, that the tester wanted to swipe up or down, instead of turning around the wheel. I also got feedback for the two physical buttons, that they were too close too each other on the right side, so I put one in the middle of each side. The right button is to start and stop a run and the left button is to get back to the first screen, with the time and date.
I really enjoyed building this prototype. It was a lot of fun coming up with different ideas and getting inspired, to build a prototype of my own. Seeing the whole process from the first try to the final prototype and going trough all the steps, was a very insightful process.
1.2 Non Visual Prototype
Sounds
For this assignment I created six audio files for the core functionalities of my paper prototype. The last two sounds are specific for my design. For creating the sounds I used a piano in GarageBand, but it was more challenging to find the right sounds, than I thought it would be.
Start
This sound is to activate the user before starting a run. It gives the user a short
amount of time to prepare, before the run begins with the last sound, that is why I
think, that this sound is fitting.
Stop
This sound signals the user, that the run has been ended. The sound is one long
sound, that fades out and gets, to give the user a calming feeling, to cool down after
the run has ended, which is why I think, that this sound fits.
Faster
This sound signals the user to run faster. This sound has many of the same sounds
following each other is a very short amount of time, to signal to the user, that he is
runing too slow.
Slower
This shound signals the user to run slower. This sound consists of deeper sounds
following each other with a bit of suspense, to signal to the user, that he is runing too
fast.
Click
This sound is being played everytime the user clicks on a symbol, like the runing
symbol or when choosing between day, week and month. This sound signals to the
user, that he has succesfully clicked on one of my previous mentioned symbols, to
give the user a feeling of competence.
Scroll
This sound signals to the user, when he is scrolling through the screen for choosing
either the day, week or month.
Usability Test Protocol
Research question:
How matching are the sounds for the fitness tracker prototype?
Characteristics of the users:
- Age 18 or above
-Medium to high experience with sounds
-Familiar with fitness tracker
-Medium to high comfort with technology
Introduction:
Thank you for participating in my testing! I want to test with you, how matching the sounds are, that I am going to play you, for my fitness tracker prototype. I will ask you too use my fitness tracker prototype with headphones and I will play the sounds with the fitting task and want you to give me feedback on the sounds. If you have any questions, please let me know right away.
Task:
-Start a run
-Look at the statistics for a day
-Click one specific statistic
Feedback questions:
How matching were the sounds to the activity?
Did the start sound activate you?
Did you feel more calmer after hearing the stop sound?
The feedback I got for my sounds was overall what I expected it to be. It wasn´t
overly positiv, but it wasn´t very negative either. Most of my tester had the most
difficulty with my sound for scrolling, which most thought wasn´t matching to the
motion and it didn´t have a big resemblance to other scrolling sounds, that they were
familiar with. In response to this, I completely scrapped the scrolling sound for my
two last testers. The start sound was the most liked sound and all testers said, that
they felt it was matching and activating. Half of my tester found the stop sound to be
calming and felt, that this would help them calming down, after having down a
demanding activity.
This assignment was more challenging for me, because we needed very specific
sounds, which were supposed to be in one sound family. I started out with trying out
different instruments in GarageBand and came to the conclusion, that the piano was
the most useful instrument for my purpose. The first few sounds were easier to
make, because I played some racing video games, like “Mario Kart”, so I knew for
the “start” and “stop” sound how I wanted them to sound. The sounds for “faster” and
“slower” were also made quicker. I struggled the most with the sounds I choose to
make specific for my design, which are the sounds for “click” and “scroll”. The “scroll”
sound was the most challenging sound to make for me, because I found it hard to
get the right tempo for it. This is also the sound, which my testers found the least
enjoyable to listen to. Overall it was an interesting experience and I want to improve
a lot, on finding fitting sounds for functions.
2.1 Wireframe Travel Planner
Introduction
The assignment was to build a wireframe for a travel planner and to write a test protocol for the testing of the wireframe. We were given the logo of a company called „Tripp3r“, for which we were supposed to build a wireframe containing of several must haves, should haves and could haves.
Documentation
I started by building the wireframe on Miro, but switched to Adobe XD after learning, that the next assignment would be to make the LoFi prototype into HiFi. At first I was beginning to just put together some ideas, that I had in my head, of how I wanted my wireframe to look like. I wanted my wireframe to have all the requirements of the must haves, should haves and could haves. Starting out was quite difficult for me, as I have never done a prototype like this before, so I just began with what I thought would be the most important to have. On the “Home Screen”, which is also my first screen, I put 4 buttons, to start a “new trip”, check your “saved trips”, to look at the map and each line and also “weather”, to see the weather and how much Co2 was saved.
2.2 HiFi Prototype
Introduction
The assignment was to build a HiFi prototype of the previous wireframe assignment. We had to use the colors, that were the given to us, through the logo of the company, that we were assigned to do for the LoFi wireframe.
After doing the last iteration of my wireframe prototype in Adobe XD, it was a comfortable task for me, to turn it into a HiFi prototype. Even though it was hard to work with the given colors, it was a joyful assignment to do. I started out with assigning colors to each button, that I had on my home button, to make use of the three colors and to have a visible difference between each section of the prototype. I assigned the green color to the “trips, the blue color to the “map” and the yellow color to the “weather”. As it was difficult to use those colors for the background, I decided used the colors in the details and keep the background in a neutral white.
The main insight, that I got from the testing was, that it was confusing and a bit too complex to use. On the positive side, the testers found the prototype to be clean, organized and consistent.
After I received all the feedback for my first iteration on the HiFi prototype, I started to change some things for my final version. The first thing I changed, was the first screen, my “Home Screen”. There I changed the “map” and “weather” button and made two icons out of those buttons, to have less text and make it visually more pleasing. After this, I switched the “save” with “pdf”, to make the saving process easier, since that was one of the most confusing tasks, during my testing of the previous version. The next thing I changed, was how I wanted to showcase the saved trips, as my first iteration was quite boring. I took inspiration from the map and wanted to display the “saved trips” in a stimulating way and make it look like it was a line from the map. Something, that I did after that, was to make, viewing each line in the “map” section of my prototype, to look similar to what I did with the “saved trips”. I think it is a more fun and more stimulating way to display it. I choose to use the yellow color for the background of “weather”, to set it a bit apart from the rest of my prototype.
3.1 Exploratory Prototype
Introduction
This assignment was about having two prototypes, that are almost exactly the same, but one or more smaller things are different. We were supposed to find out, how big of a difference those changes made, in the behavior of the user. I choose to do the A/B testing about color.
A/B Testing Part 1:
Colors and product:
Green - iPhone
Blue - Samsung
Red - Nothing phone
Four out of five testers choose the color green, which is attached to buying the iPhone. Three out of the four testers choose this option, because of the combination with the color and the product. They use an iPhone themselves and were drawn more to that. Only one tester choose the color blue in combination with the Samsung phone, because the tester likes the color more than the others and also uses an Android phone and doesn’t like the iPhone.
A/B Testing Part 2:
Colors and product:
Blue - iPhone
Green - Samsung
Red - Nothing phone
Three out of the five testers choose the color blue, which is attached to buying the iPhone. One tester choose blue, because it represents safety and assurance to him, but because he also uses an iPhone himself, he was drawn more to the product as well. Two out of three testers choose the color blue, because of the product, because they use an iPhone too. The other two testers choose the color green, because of the color, which represents positivity and is the most attractive option for them.
4.1 Experience Prototype
Introduction
Our initial idea was to create a game that was similar to the popular television show "Who wants to be a millionaire?". The concept we had in mind was a quiz-themed game where players would have to choose between four answers for each question. We planned to have a total of 20 questions, giving the user 10 seconds to read the question and select their answer.
The answers were arranged in each corner of a rectangle, with the question in the middle. To add an element of pressure, we included a 10-second countdown that was actively counting down in a strong and pressuring voice. If the player selected the correct answer, they would be applauded by a sound, but if they selected the wrong answer, they would hear a buzzer sound.
The game was designed to be both challenging and fun, as players would have to think quickly and use their knowledge to select the correct answer. We also incorporated different categories of questions, such as history, science, and pop culture, to make the game more interesting and varied. We projected the game on the floor, with a projector, that was set up on two desks.
One of the key features of the game was the use of a simple yet visually appealing interface that made it easy for players to navigate and understand the game.
Overall, the game was designed to be a fun and engaging experience for players. We believed that the combination of a quiz theme and a countdown timer would create a sense of excitement and pressure that would make the game more challenging and fun. We were confident that our game would be a hit with players and we were excited to start working on it.
In conclusion, I think that the first tester was a bit hesitant to start, because of not knowing what would be happening completely. But after the first couple question everyone knew, what it would be about and others wanted to join in or were trying to solve the questions by themselves and see, if they were faster, than the person playing the game. We could have solved this initial reaction maybe by including another person and having teams of two play against each other. Another way of solving this issue would be to tell the testers of a reward after finishing the game, before them starting the game, to give them a bit more of a reason to be more involved into the game from the start. What I really liked was, that by the time the third and final tester was playing the game, everyone, that was not playing, was very invested into the game and wanted to answer the questions themselves, which brought a very energetic dynamic to the whole experience.
Reflection
The course was an incredibly engaging and informative experience. I found myself thoroughly enjoying the material and the way in which it was presented. Ruud is a fantastic teacher who has a unique ability to help you see things from different perspectives. He has a wealth of knowledge and experience, and he is able to convey that knowledge in a way that is both clear and easy to understand.
One of the things that I enjoyed most about the course was the opportunity to build and test prototypes. I found it really interesting to apply what I was learning in a tangible way, and it was a great way to see the concepts that we were discussing come to life. I also appreciated the hands-on approach that was taken, as it allowed me to gain a deeper understanding of the material.
The course covered a wide variety of techniques and tools that are used in the design process. However, of all the techniques that we covered, the desirability toolkit was definitely my favorite. The desirability toolkit is a set of methods and techniques that are used to evaluate and improve the design of a product or service. It is a powerful tool that can help to ensure that the final product is not only functional, but also desirable to the end user. I found it to be a valuable tool that I will be able to use in my future work as a designer.
In addition to the technical content of the course, I also appreciated the broader perspective that was taken. The course not only covered the technical aspects of design, but it also touched on the social and cultural context in which design takes place. This helped me to understand the role of design in society and how it can be used to make a positive impact.
Overall, I found the course to be an incredibly valuable and enlightening experience. I learned a lot about the design process and the tools and techniques that are used in it. I also appreciated the broader perspective that was taken, as it helped me to understand the role of design in society and how it can be used to make a positive impact. I would highly recommend this course to anyone who is interested in design or who is looking to gain a deeper understanding of the design process.
